<template>
  <div class="date-time">
    <van-popup
      @click-overlay="clickoverlayClick"
      v-model:show="startFlag"
      position="bottom"
    >
      <van-datetime-picker
        @confirm="startConfirmClick"
        @cancel="startCancelClick"
        v-model="startDate"
        type="datetime"
        title="选择年月日"
      />
    </van-popup>
    <van-popup
      @click-overlay="clickoverlayClick"
      v-model:show="endFlag"
      position="bottom"
    >
      <van-datetime-picker
        v-model="endDate"
        @confirm="endConfirmClick"
        @cancel="endCancelClick"
        type="datetime"
        title="选择年月日"
      />
    </van-popup>
  </div>
</template>

<script lang="js">
import {defineComponent, reactive, ref,watch} from 'vue'
import {handleDate} from '@/utils/time'
import {compareDate} from '@/utils/time'
import { Toast } from 'vant';
export default defineComponent({
  props: {
    startTimeFlag:{
      type:Boolean,
      default:false
    },
    endTimeFlag:{
      type:Boolean,
      default:false
    }
  },
  emits:['timeFlagChange','startTimeChange','endTimeChange'],
  components: {

  },
  setup(props,{emit}) {
    const startFlag=ref(props.startTimeFlag)
    const endFlag=ref(props.endTimeFlag)
    const startDate=ref(new Date())
    const endDate=ref(new Date())
     watch(()=>props.startTimeFlag, (newValue) => {
        startFlag.value=newValue
     })

      watch(()=>props.endTimeFlag, (newValue) => {
        endFlag.value=newValue
      })

      const startConfirmClick=(value)=>{
         let time=handleDate(value)
         const f= compareDate(endDate.value,startDate.value)
          console.log(f);
          if(!f){
             Toast('开始时间不能大于结束时间!');
             return
           }
         startFlag.value=false
         emit('startTimeChange',time)
         emit('timeFlagChange')
      }
      const endConfirmClick=(value)=>{
         let time=handleDate(value)
          const f= compareDate(endDate.value,startDate.value)
          if(!f){
              Toast('结束时间不能小于开始时间!');
              return
          }
         endFlag.value=false
         emit('endTimeChange',time)
         emit('timeFlagChange')

      }
    const clickoverlayClick=()=>{
       startFlag.value=false
       emit('timeFlagChange')
    }

    const startCancelClick=()=>{
       startFlag.value=false
       emit('timeFlagChange')
    }
    const endCancelClick=()=>{
       endFlag.value=false
       emit('timeFlagChange')
    }
    return {
        startFlag,
        endFlag,
        startDate,
        endDate,
        clickoverlayClick,
        startConfirmClick,
        endConfirmClick,
        startCancelClick,
        endCancelClick
    }

  }
})
</script>

<style scoped lang="less"></style>
